
<!--侧边导航栏-->
<template>


    <el-menu id="el-menu"
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
    :collapse="isCollapse">
        <div v-if="isCollapse">
            <h3 style="color: #ffd04b; margin-left: 10px" >后台</h3>
        </div>
        <div v-else>
            <h3  style="color: #ffd04b ;margin-left: 20px">商城后台系统</h3>
        </div>
        <!--不含子菜单的导航栏-->
        <el-menu-item :index="item.path" v-for="item in noChilidren" :key="item.path" @click="clickMenu(item)">
            <!--注意字符串拼接问题-->
            <i :class="'el-icon-'+item.icon"></i>
            <span slot="title">{{item.label}}</span>
        </el-menu-item>
       <!--// 含子菜单栏的-->
        <el-submenu index="index" v-for=" (item , index) in hasChilidren" :key="index">
            <template slot="title">
                <i :class="'el-icon-'+item.icon"></i>
                <span slot="title">{{item.label}}</span>
            </template>
            <el-menu-item-group>
                <template slot="title">{{item.label}}</template>
                <el-menu-item :index="subItem.path" v-for="(subItem,subIndex) in item.children" :key="subIndex" @click="clickMenu(subItem)">{{subItem.label}}</el-menu-item>

            </el-menu-item-group>


        </el-submenu >



    </el-menu>

</template>

<script>
    export default {
        name: "CommonAside",
        computed:{
            // 没有子菜单情况
            noChilidren(){
                return this.asideMenu.filter(item =>!item.children)
            },
           hasChilidren(){
                return this.asideMenu.filter(item =>item.children)
            },
            isCollapse(){
                return this.$store.state.tab.isCollapse
            }
        },
        data(){
            return{
                // 菜单数组
                asideMenu :[

                    {
                        //人工客服
                        path:'/kefu',
                        name :'kefu',
                        label:"人工客服",
                        icon:"service"

                    },
                    {
                        path:'/',
                        name:'home',
                        label:"物流信息",
                        icon:"message"
                    },
                    {
                        path:'/logistics',
                        name:'logistics',
                        label:"物流查询",
                        icon:"s-home"
                    },
                    {
                        //订单管理
                        path:'/order',
                        name :'order',
                        label:"订单管理",
                        icon:"service"

                    },
                    {
                        path:'/marketInfo',
                        name:'marketInfo',
                        label:"商品管理",
                        icon:"shopping-cart-full"
                    },
                    {
                        path:'/user',
                        name:'user',
                        label:"买家管理",
                        icon:"user"
                    },

                    {
                        path:'/set',
                        label:"个人资料",
                        icon:"user-solid",
                        name:'set',
                        // children:[
                        //     {
                        //         path:"/changePwd",
                        //         name:"changePwd",
                        //         label:"个人资料",
                        //         icon:"setting"
                        //     },
                            // {
                            //     path:"/changePwd",
                            //     label:"设置信息",
                            //     icon:"setting"
                            // }


                       // ]
                    }
                ],

            }
        },
        methods:{
            clickMenu(item){
                //路由跳转
                this.$router.push({name:item.name})
                //实现面包栏联动效果
                this.$store.commit('selectMenu',item)

            }
        }
    }
</script>

<style scoped>
   #el-menu{
    height: 100%;
       border: none;
}
   .el-menu-vertical-demo:not(.el-menu--collapse) {
       width: 200px;
       min-height: 400px;
   }
</style>